<template>
<div >
          <div style="height: auto;width: 100%" >
            <el-tabs :tab-position="tabPosition" @tab-click="handleClick">
              <el-tab-pane label="10路充电桩" >
               <div style="width: 100%;overflow: hidden" v-if="seen">
                  <div class="item">
                    <div class="list-pic">
                      <a href="display.php?id=1381"><img src="" alt="围栏式充电桩"></a>
                    </div>
                    <dl>
                      <dt><a href="display.php?id=1381">围栏式充电桩</a></dt>
                      <dd  @click="click1"><a>查看详情</a></dd>
                    </dl>
                  </div>

                  <button  @click.stop="click1"> click me </button>
               </div>

               <div  v-if="seen1">111</div>
              </el-tab-pane>
              <el-tab-pane label="class 与style 绑定" >
                <div v-bind:class="{active : isActive}" style="">class 与style 绑定</div>
                <button  @click.stop="click3"> click me 取消样式 </button>
              </el-tab-pane>
              <el-tab-pane label="条件渲染" >
                <div v-if="type === 'A'">
                  A
                </div>
                <div v-else-if="type === 'B'">
                  B
                </div>
                <div v-else-if="type === 'C'">
                  C
                </div>
                <div v-else>
                  NOT A/B/C
                </div>
                <H1 v-show="ok">Hello v-show</H1>
              </el-tab-pane>

              <el-tab-pane label="列表渲染" >列表渲染
                <ul>
                  <li v-for="item,index in items">
                    {{index}}-{{ item.message  }}
                  </li>
                </ul>
                 <ul>
                  <li v-for="value,key in object">
                    {{key}}-{{ value }}
                  </li>
                </ul>
              </el-tab-pane>

              <el-tab-pane label="事件绑定" >
                事件绑定
                <div id="example-1">
                  <button v-on:click="counter += 1"> 数值: {{ counter }}</button>
                  <button v-on:click="greet('abc',$event)"> Greet </button>
                </div>
              </el-tab-pane>

              <el-tab-pane label="表单输入绑定" >
                v-model 双向绑定
                <input v-model="message" placeholder="edit me">
                <p>Message is :{{ message }}</p>
                <textarea  v-model="message2" placeholder="add multiple lines"></textarea>
                <p>Message2 is :{{ message2 }}</p>

                <select v-model="selected">
                  <option v-for="option in options" v-bind:value="option.value">
                    {{ option.text }}
                  </option>
                </select>
                <span>Selected: {{ selected }}</span>


              </el-tab-pane>

              <el-tab-pane label="组件基础" >
                组件是可复用的 Vue 实例,复用该实例
                <div >
                  <button-counter title="title1" >
                    <h2>hi... h2 </h2>
                  </button-counter>
                  <button-counter title="title2"></button-counter>

                </div>

              </el-tab-pane>
              <el-tab-pane label="组件注册" >
                    局部注册
                   <test></test>
                   <test></test>
                   <test></test>
              </el-tab-pane>
              <el-tab-pane label="表单校验" >表单校验
                <a href="https://www.jianshu.com/p/2d178f8761e5">vue element-ui的form表单校验总结</a>

              </el-tab-pane>
              <el-tab-pane label="Axios 前后端" >Axios 前后端
                <a href="https://www.bilibili.com/video/BV1rM4m117Ry/?spm_id_from=333.337.search-card.all.click&vd_source=7e8c74e6ef5f4645e4247ef4120b7971">Axios 前后端对接教程｜HTTP</a>
                <a href="https://www.bilibili.com/video/BV1wr4y1K7tq/?spm_id_from=333.337.search-card.all.click&vd_source=7e8c74e6ef5f4645e4247ef4120b7971">尚硅谷Web前端axios入门与源码解析</a>
              </el-tab-pane>
               <el-tab-pane label="Express" >后端应用架构（Express.js）
                <a href="https://www.bilibili.com/video/BV1Az42187WH/?spm_id_from=333.337.search-card.all.click&vd_source=7e8c74e6ef5f4645e4247ef4120b7971">后端应用架构（Express.js）</a>
              </el-tab-pane>
              <el-tab-pane label="Node.js全套入门教程" >黑马程序员Node.js全套入门教程，nodejs新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解
                <a href="https://www.bilibili.com/video/BV1a34y167AZ/?spm_id_from=333.337.search-card.all.click&vd_source=7e8c74e6ef5f4645e4247ef4120b7971">Node.js全套入门教程</a>
              </el-tab-pane>
            </el-tabs>
          </div>
</div>
</template>

<script>
const data = {
    name: 'vue',
    tabPosition: 'left',
    seen: true,
    seen1: false,
    isActive: true,  // class 与style 绑定
    type: 'D',   // 条件渲染
    ok: true,
    items:[     // 列表渲染
      {message: '南京'},
      {message: '北京'},
    ],
    object:{
      title:'title',
      author:'Gavin',
      publishAt:'2024-08-05'
    },
    counter: 0,  // 事件绑定
    message: "", // 表单输入绑定
    message2: "", // 表单输入绑定
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ],
    //表单校验在rules属性填写相关字段的校验规则

};

import Test from "./Test";
export default {
  name: "Demo",
  data() {
      return data
  },
  methods:{
    click1 : function () {
      console.log('click1....')
      data.seen = false
      data.seen1 = true
    },
    click3 : function () {
      console.log('click3....')
      data.isActive = false
    },
    handleClick(el){
      console.log('handleClick....')
      data.seen = true
      data.seen1 = false
    },
    greet: function (str,event){
      // this 在方法中指向当前 vue 实例
      alert('hello '+this.name+' !'+'获取传参'+str)
      // event 是原生dom 事件
      alert(event.target.tagName)

    }
  },

}

// 组件基础
// 引入Vue
import Vue from 'vue'

// 1. 全局注册一个名为 button-counter 的新组件
Vue.component('button-counter', {
  props: ['title'],   // 属性信息传递
  data: function () {
    return {
      count: 0
    }
  },
  template: '<div><button v-on:click="clickFun"> {{ title }} You clicked me {{ count }} times.</button><slot></slot></div>',
  methods:{
    clickFun: function () {
      this.count++
      this.$emit('clicknow',this.count)  // 触发一个事件，并设置传递的参数，第一个参数是事件名称，第二个参数是可携带的参数
    }
  }
})


</script>

<style scoped>
.active{
  background: red;
  text-align: center;
  line-height: 200px;
  width: 200px;
  height: 200px;
  color: #7db838
}

</style>
